<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>我的消息</span>
        <span class="panel-title-num" v-show="totalMessageCount">{{ totalMessageCount }}</span>
      </h4>
      <span class="text-muted cursor-pointer" @click="historyVisible = true">
        <span class="mr-1">历史消息</span>
        <i class="fa fa-angle-right"></i>
      </span>
    </div>
    <el-table :height="height" :data="messages" border class="table-sm">
      <el-table-column label="消息类型" prop="messageText" align="center"></el-table-column>
      <el-table-column label="消息数量" prop="messageCount" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showDialog(scope.row)">去查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="noClaimVisible"
      :close-on-click-modal="false"
      class="dialog-sm"
      append-to-body
      :title="`未受理反馈（${govMessageNoClaimCount}）`"
      top="30px"
      width="980px"
    >
      <panel-message-no-claim></panel-message-no-claim>
    </el-dialog>

    <el-dialog
      :visible.sync="loanConfuseVisible"
      :close-on-click-modal="false"
      class="dialog-sm"
      append-to-body
      :title="`已拒绝反馈（${govMessageLoanConfuseCount}）`"
      top="30px"
      width="980px"
    >
      <panel-message-loan-confuse></panel-message-loan-confuse>
    </el-dialog>

    <el-dialog
      :visible.sync="yesClaimVisible"
      :close-on-click-modal="false"
      class="dialog-sm"
      append-to-body
      :title="`已受理提示（${govMessageYesClaimCount}）`"
      top="30px"
      width="980px"
    >
      <panel-message-yes-claim></panel-message-yes-claim>
    </el-dialog>

    <el-dialog
      :visible.sync="loanLendingVisible"
      :close-on-click-modal="false"
      class="dialog-sm"
      append-to-body
      :title="`已放款提示（${govMessageLoanLendingCount}）`"
      top="30px"
      width="980px"
    >
      <panel-message-loan-lending></panel-message-loan-lending>
    </el-dialog>

    <el-dialog
      :visible.sync="loanBehExcVisible"
      :close-on-click-modal="false"
      class="dialog-sm"
      append-to-body
      :title="`异常项目提示（${govMessageLoanBehExcCount}）`"
      top="30px"
      width="980px"
    >
      <panel-message-loan-beh-exc></panel-message-loan-beh-exc>
    </el-dialog>

    <panel-message-history-dialog :visible.sync="historyVisible"></panel-message-history-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PanelMessageNoClaim from '@/gov/views/index/PanelMessageNoClaim'
import PanelMessageLoanConfuse from '@/gov/views/index/PanelMessageLoanConfuse'
import PanelMessageYesClaim from '@/gov/views/index/PanelMessageYesClaim'
import PanelMessageLoanLending from '@/gov/views/index/PanelMessageLoanLending'
import PanelMessageLoanBehExc from '@/gov/views/index/PanelMessageLoanBehExc'
import PanelMessageHistoryDialog from '@/gov/views/index/PanelMessageHistoryDialog'

export default {
  components: {
    PanelMessageNoClaim,
    PanelMessageLoanConfuse,
    PanelMessageYesClaim,
    PanelMessageLoanLending,
    PanelMessageLoanBehExc,
    PanelMessageHistoryDialog,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      noClaimVisible: false,
      loanConfuseVisible: false,
      yesClaimVisible: false,
      loanLendingVisible: false,
      loanBehExcVisible: false,
      historyVisible: false,
    }
  },
  computed: {
    ...mapGetters([
      'govMessageNoClaimCount',
      'govMessageLoanConfuseCount',
      'govMessageYesClaimCount',
      'govMessageLoanLendingCount',
      'govMessageLoanBehExcCount',
    ]),
    messages() {
      return [
        { messageType: 0, messageText: '未受理反馈', messageCount: this.govMessageNoClaimCount },
        {
          messageType: 1,
          messageText: '已拒绝反馈',
          messageCount: this.govMessageLoanConfuseCount,
        },
        { messageType: 2, messageText: '已受理提示', messageCount: this.govMessageYesClaimCount },
        {
          messageType: 3,
          messageText: '已放款提示',
          messageCount: this.govMessageLoanLendingCount,
        },
        { messageType: 4, messageText: '异常提示', messageCount: this.govMessageLoanBehExcCount },
      ]
    },
    totalMessageCount() {
      return this.messages.reduce((prev, curr) => prev + (curr.messageCount || 0), 0)
    },
  },
  watch: {
    noClaimVisible(val) {
      if (!val) this.$store.dispatch('updateGovMessageNoClaim')
    },
    loanConfuseVisible(val) {
      if (!val) this.$store.dispatch('updateGovMessageLoanConfuse')
    },
    yesClaimVisible(val) {
      if (!val) this.$store.dispatch('updateGovMessageYesClaim')
    },
    loanLendingVisible(val) {
      if (!val) this.$store.dispatch('updateGovMessageLoanLending')
    },
    loanBehExcVisible(val) {
      if (!val) this.$store.dispatch('updateGovMessageLoanBehExc')
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      const params = { index: 1, size: 20 }
      this.loading = true
      await this.$utils.promise(
        Promise.all([
          this.$store.dispatch('getGovMessageNoClaim', params),
          this.$store.dispatch('getGovMessageLoanConfuse', params),
          this.$store.dispatch('getGovMessageYesClaim', params),
          this.$store.dispatch('getGovMessageLoanLending', params),
          this.$store.dispatch('getGovMessageLoanBehExc', params),
        ])
      )
      this.loading = false
    },
    showDialog({ messageType }) {
      switch (messageType) {
        case 0:
          this.noClaimVisible = true
          break
        case 1:
          this.loanConfuseVisible = true
          break
        case 2:
          this.yesClaimVisible = true
          break
        case 3:
          this.loanLendingVisible = true
          break
        case 4:
          this.loanBehExcVisible = true
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
</style>
